<template>
  <div class="box left-list">
    <h1 class="list-title">{{ title }}</h1>
    <div class="container">
      <div :class="['list-item', item.disabled ? 'disabled' : '']" v-for="item in listData" :key="item.id">
        <input type="checkbox" :disabled="item.disabled" :id="'run' + item.id"
          @click="setCheckedData(leftOrRight, item, $event)">
        <label :for="'run' + item.id" class="label">
          {{ item.phone_name }}
        </label>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { listItemProps } from './props';
const { title, listData, leftOrRight } = defineProps(listItemProps);
const emit = defineEmits(['addCheckedData', 'removeCheckedData']);
// Lifecycle hooks
onMounted(() => {
  // Code to run when component is mounted
  console.log('Component mounted!');
});

/* checkbox的点击事件 */
function setCheckedData (leftOrRight, item, e) {
  if (e.target.checked) {
    /* 添加数据到对应侧 */
    emit('addCheckedData', leftOrRight, item);
  } else {
    /* 删除对应侧的数据 */
    emit('removeCheckedData', leftOrRight, item.id);
  }
}
</script>

<style lang='scss' scoped>
/* Your component styles here */
.box {
  width: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;


  .list-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 50px;
    background-color: #ddd;
    border-radius: 5px;

  }

  .container {
    flex: 1;
    border: 1px solid #f00;

    .list-item {
      color: #fff;

      &.disabled {
        opacity: 0.5;
        // cursor: no-drop;
      }

      input[type="checkbox"]:disabled {
        cursor: no-drop;
      }
    }
  }
}

// .left-list,
// .right-list {
//   border: 1px solid #f00;
// }
</style>